<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮组-ButtonGroupDemo</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        按钮组<br>
        <!--<div class="btn-group"> 水平-->
        <div class="btn-group-vertical">垂直按钮
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div><br>
        按钮工具栏
        <div class="btn-toolbar">
            <div class="btn-group">
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">1</span></button>
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">2</span></button>
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">3</span></button>
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">4</span></button>
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">5</span></button>
            </div>
            <div class="btn-group">
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">1</span></button>
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">2</span></button>
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">3</span></button>
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">4</span></button>
            </div>
            <div class="btn-group">
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">1</span></button>
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">2</span></button>
                <button type="button" class=" btn btn-default"><span class="glyphicon glyphicon-secondary">3</span></button>
            </div><br>
        </div>
        <div class="container">
            <div class="btn-group btn-group-lg">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-default">2</button>
                <button type="button" class="btn btn-default">3</button>
            </div>
            <div class="btn-group btn-group">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-default">2</button>
                <button type="button" class="btn btn-default">3</button>
            </div>
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-default">2</button>
                <button type="button" class="btn btn-default">3</button>
            </div>
            <div class="btn-group btn-group-xs">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-default">2</button>
                <button type="button" class="btn btn-default">3</button>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="btn-group">
            <button type="button" class=" btn btn-default">1</button>
            <button type="button" class=" btn btn-default">2</button>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    下来菜单
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="btn-group btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-default">LEFT</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">MIDDLE</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">RIGHT</button>
        </div>
    </div>
</body>
</html>